<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.1.1-渲染器与响应系统的结合</title>
</head>

<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>
    /**
     * 渲染器是用来执行渲染任务的
     * - 在浏览器平台上，用它来渲染其中的真实 DOM 元素
     * - 渲染器不仅能够渲染真实 DOM 元素，它还是框架跨平台能力的关键
     * - 在设计渲染器的时候一定要考虑好可自定义的能力
     * - 本节，我们暂时将渲染器限定在 DOM 平台
     * 
     * 响应系统和渲染器之间的关系
     * - 利用响应系统的能力，自动调用渲染器完成页面的渲染和更新
     * 
     * 使用 @vue/reactivity 包提供的响应式 API 进行讲解
     * - @vue/reactivity 的实现原理，第二篇已有讲解
     * - @vue/reactivity 提供了 IIFE 模块格式，
     *    因此我们可以直接通过 <script> 标签引用到页面中使用
     * - 它暴露的全局 API 名叫 VueReactivity
     * - 通过 VueReactivity 得到了 effect 和 ref 这两个 API
     * */

    //  通过 VueReactivity 得到了 effect 和 ref 
    const { effect, ref } = VueReactivity;

    // 渲染器用来渲染真实 DOM 元素，那么严格来说，下面的函数就是一个合格的渲染器
    function renderer(domString, container) {
        container.innerHTML = domString
    }

    let count = ref(1)

    effect(() => {
        renderer(`<div>${count.value}</div>`, document.getElementById('app'))
    })

    setTimeout(() => {
        count.value = 2
    }, 2000)
    
</script>

</html>